<template>
  <div>
        <!-- 打印预览 print-->
        <el-main class="main">
          <div ref="exportPdf" id="exportPdf" >
            <!-- 表格 -->
            <Excel11 ref="refExcel" :title="excel_title" :tableArr="tableArr" :tableArr2="tableArr2" :tableArr4="tableArr4" />
          </div>
        </el-main>
        <div>
          <el-button type="primary" size="mini" @click="printHandle">打印预览</el-button>
        </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas' // 转为图片
import printJS from 'print-js' // 打印
import Excel11 from './excel'
import Excelmodel from './excelmodel.vue'
export default {
  name: 'OrderDetails',
  components: { Excel11 },
  props: {
    orderVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogWidth: '1500px',
      // 订单时间线
      timeList: [
        { year: '2022', time: '03-01 15:25:13' },
        { year: '2022', time: '04-01 15:25:13' }
        // { year: '2022', time: '05-01 15:25:13' }
        // { year: '2022', time: '06-01 15:25:13' }
      ],
      number: 25, // 平均偏移位置
      percentum: '', // 初始位置百分比
      // 悬浮显示
      isShowTooltip: true,
      // 表格数据
      excel_title: '军队无军籍退休（退职）职工退休费构成表',
      tableArr: [
        {
          key: '订单号',
          value: 'wb-2022-03-1801',
          border: 'none'
        },
        {
          key: '客户名称',
          value: '大理市政府',
          border: 'none'
        },
        {
          key: '办公室地址',
          value: '923',
          border: 'none'
        },
        {
          key: '联系电话',
          value: '13511112222',
          border: 'none'
        },
        {
          key: '维修工程师',
          value: '张飞'
        }
      ],
      // 第二列表格
      tableArr2: [
        {
          key: '保修时间',
          value: '2022-03-18 12:00',
          width: '101.44px',
          _width: '383.8px',
          border: 'none'
        },
        {
          key: '预计时间',
          value: '2小时',
          width: '101.44px',
          _width: '383.8px',
          border: 'none'
        },
        {
          key: '报修人',
          value: '关羽',
          width: '101.44px',
          _width: '152.3px'
        },
        // ------------------
        {
          key: '服务内容',
          value: '打印机连不上',
          width: '101.44px',
          _width: '383.8px',
          border: 'none'
        },
        {
          key: '服务方式',
          value: '上门服务',
          width: '101.44px',
          _width: '383.8px',
          border: 'none'
        },
        {
          key: '报修方式',
          value: '在线报修',
          width: '101.44px',
          _width: '152.3px'
        },
        // --------------------
        {
          key: '影响范围',
          value: '一般',
          width: '101.44px',
          _width: '383.8px',
          border: 'none'
        },
        {
          key: '紧急程度',
          value: '一般',
          width: '101.44px',
          _width: '383.8px',
          border: 'none'
        },
        {
          key: '其他',
          value: '',
          width: '101.44px',
          _width: '152.3px'
        }
      ],
      // 第四列
      tableArr4: [
        {
          key: '故障原因',
          value: '经排查，网络断开，内网故障',
          key2: '维修处理情况',
          value2: '国产电脑连接共享打印机，已处理完成',
          type: 1
        },
        {
          key: '注：若需要重装系统, 数据请客户提前备份。客户确认签字',
          value: '',
          key2: '修复时间',
          value2: '2022-03-08 11:00',
          type: 2
        },
        {
          key: '客户填写部分',
          value: '',
          key2: '客户签字及日期',
          value2: '2022-03-08 12:00',
          type: 3
        }
      ],
      otherList: [
        { label: '工单状态', value: '已结单' },
        { label: '工单耗时', value: '0分钟' },
        { label: '工单来源', value: '小程序' },
        { label: '收费项目', value: '无收费项目' },
        { label: '收费金额', value: '000000' },
        { label: '到场时间', value: '2022-03-12 09:45:25' }
      ],
      // 窗口变化
      screenWidth: document.body.clientWidth
    }
  },
  created() {
    if (this.screenWidth > 1700) {
      this.dialogWidth = '1500px'
      this.percentum = 7
    } else {
      this.dialogWidth = '1050px'
      this.percentum = 4.2
    }
  },
  mounted() {
    // 获取窗口变化
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
        this.$nextTick(() => {
          // console.log(this.$refs.refTime.width, 'ref')
        })
      })()
    }
  },
  watch: {
    // 监听窗口变化
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        let that = this

        if (this.screenWidth > 1700) {
          that.dialogWidth = '1500px'
          that.percentum = 7
        } else {
          that.dialogWidth = '1050px'
          that.percentum = 4.2
        }
        setTimeout(function () {
          // 打印screenWidth变化的值
          console.log(that.screenWidth)
          that.timer = false
        }, 400)
      }
    }
  },
  computed: {
    detailsVisible: {
      get() {
        return this.orderVisible
      },
      set(val) {
        console.log(val)
        this.$emit('update:orderVisible', val) // detailsVisible改变的时候通知父组件
      }
    }
  },
  methods: {
    // 关闭弹框
    handleClose() {
      // this.orderVisible = false
    },
    //转图片打印
    printHandle() {
      html2canvas(this.$refs.exportPdf, {
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight
      }).then(canvas => {
        const url = canvas.toDataURL()
        this.img = url
        printJS({
          printable: url,
          type: 'image',
          documentTitle: ''
        })
      })
    },
    printContext() {
      this.$print(this.$refs.print)
    }
  }
}
</script>
<style lang="scss" scoped>
$titleColor: rgb(117, 117, 117);
$borderColor: 1px solid #e9e9e9;
.steps-cont {
  // width: 80%;
  margin: 0 auto;
  position: relative;
  padding-top: 22px;
}
.date {
  position: absolute;
  top: -50px;
  left: 5.5%;
  padding: 8px 30px;
  color: #fff;
  //background: $nav-bg;
  border-radius: 35px;
  &-time {
    font-size: 12px;
  }
}
.date:after {
  content: ''; /*CSS伪类用法*/
  position: absolute; /*定位背景横线的位置*/
  top: 52px;
  left: 49%;
  //background: $nav-bg; /*宽和高做出来的背景横线*/
  width: 4px;
  height: 22px;
}
.box-card {
  padding-top: 20px;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 50px;
}
.table {
  width: 100%; // 1200px
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
</style>
